<template>
	<view class="chat-container">
		<view class="message-list">
			<view v-for="message in messages" :key="message.id" class="message">
				<text>{{ message.content }}</text>
			</view>
		</view>
		<view class="input-container">
			<input v-model="newMessage" placeholder="Type a message" />
			<button @click="sendMessage">Send</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messages: [], // 消息列表
				newMessage: '', // 新消息内容
			};
		},
		methods: {
			// 发送消息
			sendMessage() {
				if (this.newMessage.trim() === '') return;

				// 调用后端接口发送消息
				uni.request({
					url: 'https://your-backend-api/send',
					method: 'POST',
					data: {
						content: this.newMessage,
						// 其他必要的字段，如用户ID
					},
					success: (res) => {
						if (res.statusCode === 200) {
							this.newMessage = ''; // 清空输入框
							this.fetchMessages(); // 刷新消息列表
						}
					},
					fail: (err) => {
						console.error('Error sending message:', err);
					},
				});
			},

			// 获取消息列表
			fetchMessages() {
				uni.request({
					url: 'https://your-backend-api/messages',
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200) {
							this.messages = res.data.messages; // 更新消息列表
						}
					},
					fail: (err) => {
						console.error('Error fetching messages:', err);
					},
				});
			},
		},
		mounted() {
			this.fetchMessages(); // 初始获取消息
		},
	};
</script>

<style>
	/* 添加样式 */
</style>